<script setup>
    import { nextTick, ref } from 'vue'
    import { service, common } from '@utils'
    import { useRouter } from 'vue-router'
    import Type from '@components/search/type'
    import Search from '@components/search/index'
    const router = useRouter()

    const pageRef = ref()
    const tableRef = ref()

    const visible = ref(false)
    const openData = ref()
    const searchs = ref([
        // {
        //     type: Type.INPUT,
        //     key: 'id',
        //     width: 5,
        //     placeholder: '请输入ID',
        //     likes:true
        // },
        // {
        //     type: Type.INPUT,
        //     key: 'phone',
        //     width: 5,
        //     placeholder: '请输入标识',
        //     likes:true
        // },
        {
            type: Type.INPUT,
            key: 'mobile',
            width: 5,
            placeholder: '请输入手机号',
            likes: true
        },
        {
            type: Type.DATE_RANGE,
            width: 7,
            key: 'time'
            // endPlaceholder: '启用结束时间',
            // startPlaceholder: '启用开始时间',

            // format: 'YYYY-MM-DD HH:mm:ss'
        },
        {
            width: 6,
            type: Type.SEARCH_EXPORT_BUTTON
        }
    ])
    let queryForm = {}
    const open = (value) => {
        // let query = value.query;
        // searchs.value[2].default = [query.reportStartTime, query.reportEndTime]
        queryForm = { type: value.type }
        if (value.row) {
            queryForm.reportDate = value.row.reportDate
            queryForm.channelCode = value.row.channelCode
        }
        if(value.time && value.time.reportStartTime){
            queryForm.startDate = value.time.reportStartTime
            queryForm.endDate = value.time.reportEndTime
            queryForm.time = [value.time.reportStartTime,value.time.reportEndTime]
            searchs.value[1].default = [value.time.reportStartTime,value.time.reportEndTime]
        }
        openData.value = value
        visible.value = true
        nextTick(() => {
            pageRef.value.refresh()
        })
    }

    const close = () => {
        visible.value = false
        searchs.value[1].default = null
        openData.value = null
    }

    const onSearch = (param) => {
        queryForm = { type: openData.value.type, ...param }
        if (openData.value.row) {
            queryForm.channelCode = openData.value.row.channelCode
            if (!param.time) {
                queryForm.reportDate = openData.value.row.reportDate
            }
        }
        pageRef.value.refresh()
    }
    const exportData = async (query) => {
        let queryForm = { type: openData.value.type, ...query }
        if (openData.value.row) {
            queryForm.channelCode = openData.value.row.channelCode
            if (!query.time) {
                queryForm.reportDate = openData.value.row.reportDate
            }
        }
        if(query.time.length>0){
            queryForm.startDate = query.time[0]
            queryForm.endDate = query.time[1]
            delete queryForm.reportDate
        }
        delete queryForm.time
        queryForm.fileName = '渠道用户明细统计.xlsx'
        const res = await service.channelConfigApi.ChannelUserExport(queryForm)
        res && common.export(res, '渠道用户明细统计.xlsx')
    }
    const getData = async ({ pageNum, pageSize }, cb) => {
        if (queryForm.time && queryForm.time.length > 0) {
            queryForm.startDate = queryForm.time[0]
            queryForm.endDate = queryForm.time[1]
        }
        queryForm.channelCode = openData.value.time ? openData.value.time.channelCode : openData.value.row.channelCode
        delete queryForm.time
        const res = await service.channelConfigApi.channelReportUserDetail(pageNum, pageSize, queryForm)
        cb(res)
        setTimeout(() => {
            tableRef.value.scrollTo(0, 0)
        }, 0)
    }

    //把方法暴露给父组件
    defineExpose({
        open
    })
</script>

<template>
    <el-dialog v-model="visible" width="80%" title="详情" center @close="close" destroy-on-close>
        <search :items="searchs" @export="exportData" @filter="onSearch" :noPage="true" />
        <page-wrapper @get-data="getData" ref="pageRef" :on-load="false">
            <template v-slot:default="props">
                <vxe-table
                    class="mytable-scrollbar"
                    ref="tableRef"
                    :loading="props.loading"
                    :data="props.tableData.records"
                    :max-height="common.tableHeight(true, 1, 100)"
                    highlight-hover-row
                    round
                    stripe
                    border
                >
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="userId" title="用户ID" />
                    <!-- <vxe-column field="balanceNo" title="用户标识" width="200" /> -->
                    <vxe-column field="userName" title="姓名" />
                    <vxe-column field="mobile" title="手机号" />
                    <vxe-column field="loginDate" title="进入活动页时间" />
                    <vxe-column field="submitDate" title="下单时间" />
                    <vxe-column field="rentDate" title="实际租用开始时间" width="auto" />
                </vxe-table>
            </template>
        </page-wrapper>
    </el-dialog>
</template>

<style lang="scss" scoped>
    /*滚动条整体部分*/
    .mytable-scrollbar ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    /*滚动条的轨道*/
    .mytable-scrollbar ::-webkit-scrollbar-track {
        background-color: #ffffff;
    }

    /*滚动条里面的小方块，能向上向下移动*/
    .mytable-scrollbar ::-webkit-scrollbar-thumb {
        background-color: #bfbfbf;
        border-radius: 5px;
        border: 1px solid #f1f1f1;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    .mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }

    .mytable-scrollbar ::-webkit-scrollbar-thumb:active {
        background-color: #787878;
    }

    /*边角，即两个滚动条的交汇处*/
    .mytable-scrollbar ::-webkit-scrollbar-corner {
        background-color: #ffffff;
    }
</style>
